<script setup lang="ts">

import {uploadPath, visitPath} from "@/api/edu/fileApi";
import {onMounted, ref, watch} from "vue";
import {postQueryStatus} from "@/api/edu/dictApi";
import {ElMessage, UploadProps} from "element-plus";
import {isEmpty, msg} from "@/config/Tool";
import {postAddVideo} from "@/api/edu/videoApi";
let props = defineProps<{ itemInfo: any }>();//接收外部传过来的值（接收）
const Emit = defineEmits(["receiveVideo"]);//定义外部的函数 向外界传值（确定按钮）
const show = ref(true)
const dictStatus2 = ref([])



watch(show,(newValue)=>{
  if (!newValue){
    Emit('receiveVideo',false)
  }
})

onMounted(()=>{
  postQueryStatus({type:"2"}).then(res=>{
    if (res.code===200){
      props.itemInfo.type=res.data[0].code;
      dictStatus2.value=res.data;
    }
  })
})

/**
 * 视频上传成功
 */
const uploadSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  msg(response,'')
  if (response.code===200){
   props.itemInfo.url=response.data.fileName;
  }
};

/**
 * 视频上传之前
 */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'video/mp4') {
    ElMessage.error('Video must be in MP4 format!')
    return false
  }
  return true
}

/**
 * 提交
 */
function onSubmit(){
  if (isEmpty(props.itemInfo.name)){
    ElMessage.error("请填写课程名称！")
  }else if (isEmpty(props.itemInfo.url)){
    ElMessage.error("请上传课程视频！")
  }else {
    postAddVideo(props.itemInfo).then((res)=>{
      msg(res,"");
      if (res.code===200){
        show.value=false;
      }
    })
  }
}

</script>

<template>
  <el-dialog v-model="show" title="添加课程" width="400" draggable>
    <div class="row-center" style="margin-top: 20px;user-select: none" >
      <div>
        <!--课程名称-->
        <el-form-item label="课程名称" label-width="100">
          <el-input v-model="itemInfo.name" maxlength="15"  />
        </el-form-item>
        <!--课程等级-->
        <el-form-item label="课程等级" label-width="100">
          <el-select
              v-model="itemInfo.type"
              placeholder="Select"
              style="width: 240px"
          >
            <el-option
                v-for="item in dictStatus2"
                :key="item.id"
                :label="item.name"
                :value="item.code"
            />
          </el-select>
        </el-form-item>
        <!--上传课程视频-->
        <el-form-item label="上传课程视频" label-width="100">
          <el-upload
              class="avatar-uploader"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
          >
            <span v-if="itemInfo.url">{{itemInfo.url}}</span>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">添加</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 5px;
  border: gainsboro 1px solid;
}

</style>
